<%--
  Created by IntelliJ IDEA.
  User: 周星星
  Date: 2021/10/8
  Time: 18:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>上传身份证与驾驶证</title>
    <link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/dist/layui/css/layui.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
    <link href="http://r1nxp2i0y.hn-bkt.clouddn.com/images/ico.png" rel="icon" type="image/x-ico"/>

    <style>
        .contentBtn1{
            margin-top: 30px;
            margin-left: 30px;
        }
        .contentBtn7{
            margin-top: 30px;
            margin-left: 10px;
        }
        .contentBtn2{
            margin-left: 220px;
            margin-top: -30px;
        }
        .contentBtn6{
            margin-left: 200px;
            margin-top: -30px;
        }
        .contentBtn3{
            margin-top: 30px;
            margin-left: 8px;
        }
        .contentBtn4{
            margin-left: 200px;
            margin-top: -30px;
        }
        .contentBtn5{
            margin-left: 225px;
            margin-top: -30px;
        }
        .nameBrn{
            color: #ff0e16;
        }
        .nameBtn{
            width: 100px;
            height: 30px;
            margin-left: 10px;
        }
        .dateBtn{
            width: 130px;
            height: 30px;
            margin-left: 10px;
        }
        .timeBtn{
            width: 120px;
            height: 30px;
            margin-left: 5px;
        }
        .nationBtn{
            width: 80px;
            height: 30px;
            margin-left: 10px;
        }
        .idBtn{
            width: 200px;
            height: 30px;
        }
        .addressBtn{
            width: 380px;
            height: 30px;
            margin-left: 10px;
        }
        .carIdBtn{
            width: 300px;
            height: 30px;
        }
        .genderBtn{
            width: 60px;
            height: 30px;
            margin-left: 10px;
        }
        .header{
            width: 1180px;
            height: 100px;
            margin: 0 auto;
            /*background-color: #4EBBBB;*/
        }
        .header img{
            height: 100%;
        }
        .header .content{
            width: 8%;
            height: 100%;
            float: right;
            /*background-color: salmon;*/
        }
        .header .content a{
            display: inline-block;
            font-size: 14px;
            line-height: 100px;
            text-align: center;
            text-decoration: none;
            color: #23b7b7;
            margin-left: -20px;
            margin-top: 2px;
        }
        .header .help_center{
            width: 8%;
            height: 20px;
            float: right;
            /*border-right: 2px solid gray;*/
            margin-top: 40px;
            margin-left: -10px;
            /*background-color: cornflowerblue;*/
        }
        .header .help_center a{
            font-size: 14px;
            /*margin-left: 20px;*/
            text-decoration: none;
            margin-left: -10px;
            color: #B7B4AC;
        }
        .header .help_center span{
            margin-left: 10px;
            font-size: 14px;
            color: darkgray;
        }
        .header .user{
            width: 10%;
            height: 20px;
            float: right;
            /*border-right: 2px solid gray;*/
            margin-top: 40px;
            /*background-color: cornflowerblue;*/
        }
        .header .user a{
            font-size: 14px;
            text-decoration: none;
            color: #23b7b7;
            /*margin-left: -10px;*/
        }
        .header .user span{
            font-size: 14px;
            color: #B7B4AC;
        }
        .user .user-span{
            margin-left: 10px;
        }
        /*订单步骤*/
        .order_banner_step{
            width: 1180px;
            height: 8px;
            background: #999;
            margin: 15px auto 60px;
            position: relative;
            /*background-color: #19ff3d;*/
        }
        /*代表订单执行的步骤的css样式*/
        .progress-percent {
            width: 990px;
            background: #23b7b7;
            height: 8px;
            position: absolute;
            top: 0;
            left: 0;
        }
        .progress-icon span {
            width: 34px;
            height: 34px;
            font-size: 12px;
            line-height: 34px;
            text-align: center;
            color: #fff;
            margin-top: -13px;
            -webkit-border-radius: 34px;
            position: absolute;
        }
        .progress-firsticon {
            left: 230px;
            background: #23b7b7;
        }
        .progress-secondicon {
            left: 540px;
            background: #23b7b7;
        }
        .progress-thirdicon {
            left: 860px;
            background: #23b7b7;
        }
        .progress-fourthicon {
            left: 1146px;
            background: #999;
        }
        .progress-text span {
            position: absolute;
            top: 24px;
            font-size: 14px;
        }
        .progress-firsttext {
            left: 220px;
            color: #23b7b7;
        }
        .progress-secondtext {
            left: 515px;
            color: #23b7b7;
        }
        .progress-thirdtext {
            left: 850px;
            color: #333;
        }
        .progress-fourthtext {
            left: 1120px;
            color: #333;
        }
        .information_main_all{
            width: 1500px;
        }
        .information_main{
            margin: 0 auto;
            width: 950px;
            height: 600px;
            /* background: #ff287d;*/
            border: 1px solid #666;
        }
        .information_main_left{
            float: left;
            width: 50%;
            height: 100%;
            /*background: #19ff3d;*/
            border-right: 1px solid #666;
        }
        .information_main_left_img{
            width: 400px;
            height: 200px;
            background: #D9E8F4;
            margin-top: 30px;
            margin-left: 35px;
        }
        .information_main_font{
            display: block;
            color: #666;
            font-size: 10px;
            margin-top: -1px;
            margin-left: 90px;
        }
        .information_main_right{
            float: right;
            width: 50%;
            height: 100%;
            /* background: #ff27bc;*/
            margin-top: -600px;
        }
        .main_footer{
            width: 100%;
            height: 50px;
            /*background-color: #de2dff;*/
            margin-top: 10px;
        }
        .subBtn{
            margin-left: 708px;
            margin-top: -1px;
            background-color: #23b7b7;
            color: #FFF;
            width: 80px;
            height: 30px;
            border-radius: 10% ;
            cursor: pointer;
        }
        /*底部*/
        .footer {
            width: 100%;
            height: 98px;
            margin-top: -18px;
            margin-left: -20px;
        }
        .footer-box {
            width: 1180px;
            height: 100px;
            margin: auto;
        }
        .clear_float {
            display: block;
        }
        .footer-box .footer-left {
            padding: 15px 0 0 5px;
            color: #333;
            width: 670px;
            height: 80px;
            float: left;
            font-size: 12px;
        }
        .footer-box .footer-left p {
            padding: 5px 0;
        }
        .footer-box .footer-left p a{
            text-decoration: none;
        }
        .footer-box .footer-left a {
            color: #333;
            margin: 0 3px;
        }
        .footer-box .footer-right {
            padding: 15px 5px 0 0;
            color: #333;
            width: 480px;
            height: 80px;
            font-size: 0;
            text-align: right;
            float: right;
            margin-top: 10px;
        }

        #lab-file{
            font-size: 12px;
            padding: 5px 20px;
            background: #23b7b7;
            color: #FFF;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-left: 30px;
            position: relative;
            top: 8px;
        }
        #myimage{
            display: none;
        }
        .submitBtn1{
            margin-left: 140px;
            font-size: 12px;
            padding: 5px 20px;
            background: #23b7b7;
            color: #FFF;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            top: 8px;
        }

        #lab-file2{
            font-size: 12px;
            padding: 5px 20px;
            background: #23b7b7;
            color: #FFF;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-left: 30px;
            position: relative;
            top: 8px;
        }
        #carimage{
            display: none;
        }
        .submitBtn2{
            margin-left: 140px;
            font-size: 12px;
            padding: 5px 20px;
            background: #23b7b7;
            color: #FFF;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            position: relative;
            top: 8px;
        }


    </style>

</head>
<body>
<!-------------------------------头部导航------------------------------->
<div class="header">
    <a href="${pageContext.request.contextPath}">
        <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/logo.png">
    </a>
    <div class="content">
        <a href="">400-888-6608</a>
    </div>
    <div class="help_center">
        <a href="">帮助中心</a>
        <span>|</span>
    </div>
    <div class="help_center">
        <a href="">我的小橘</a>
        <span>|</span>
    </div>
    <div class="user">
        <span>${loginCustomer.custName}</span>
        <a href="">[退出]</a>
        <span class="user-span">|</span>
    </div>
</div>

<div class="order_banner_step">
    <div class="progress-percent"></div>
    <div class="progress-icon">
        <span class="progress-firsticon">1</span>
        <span class="progress-secondicon">2</span>
        <span class="progress-thirdicon">3</span>
        <span class="progress-fourthicon">4</span>
    </div>
    <div class="progress-text">
        <span class="progress-firsttext">挑选车型</span>
        <span class="progress-secondtext">填写与核对订单</span>
        <span class="progress-thirdtext">上传双证</span>
        <span class="progress-fourthtext">成功提交</span>
    </div>
</div>

<div class="information_main_all">
<div class="information_main">
    <div class="information_main_left">
        <div class="information_main_left_img">

            <form  method="post" enctype="multipart/form-data" class="imageForm1">
                <label for="myimage" id="lab-file">上传身份证</label>
                <input type="file" name="myimage" onchange="changepic1(this)" class="myimage" id="myimage">
                <input type="button" value="确认上传"  data-value="1" class="submitBtn1"  accept="image/jpg,image/jpeg,image/gif,image/png">
            </form>

            <img class="preImg1"  id="preImg1" style="max-width: 280px;max-height: 160px;margin-top: 10px;margin-left: 90px"/>
        </div>

        <span class="information_main_font">上传身份证正面图片文件,支持jpg/png,且不超过500kb</span>

        <form class="idCard">
            <div class="contentBtn1">
                <span class="nameBrn">*</span>姓名<input type="text" value="" class="nameBtn" id="idCardName">
            </div>
            <div class="contentBtn2">
                <span class="nameBrn">*</span>性别<input type="text" value="" class="genderBtn" id="idCardSex">
            </div>
            <div class="contentBtn3">
                出生日期<input type="text" value="" class="nameBtn" id="idCardBirth">
            </div>

            <div class="contentBtn4">
                <span class="nameBrn">*</span>身份证号<input type="text" value="" class="idBtn" id="idCardNum">
            </div>

            <div class="contentBtn1">
                <span class="nameBrn">*</span>地址<input type="text" value="" class="addressBtn" id="idCardAddress">
            </div>

        </form>

    </div>

    <div class="information_main_right">
        <div class="information_main_left_img">

            <form  method="post" enctype="multipart/form-data" class="imageForm2">
                <label for="carimage" id="lab-file2">上传驾驶证</label>
                <input type="file" name="carimage" onchange="changepic2(this)" class="carimage"  id="carimage">
                <input type="button" value="确认上传" data-value="2" class="submitBtn2" accept="image/jpg,image/jpeg,image/gif,image/png">
            </form>

            <img class="preImg2"  id="preImg2" style="max-width: 280px;max-height: 160px;margin-top: 10px;margin-left: 90px"/>
        </div>
        <span class="information_main_font">上传驾驶证正面图片文件,支持jpg/png,且不超过500kb</span>
        <form class="driver">
            <div class="contentBtn1">
                <span class="nameBrn">*</span>姓名<input type="text" value="" class="nameBtn" id="driverName">
            </div>
            <div class="contentBtn2">
                <span class="nameBrn">*</span>性别<input type="text" value="" class="genderBtn" id="driverSex">
            </div>
            <div class="contentBtn3">
                <span class="nameBrn">*</span>开始时间<input type="text" value="" class="timeBtn" id="driverStartTime">
            </div>

            <div class="contentBtn5">
                <span class="nameBrn">*</span>国籍<input type="text" value="" class="nationBtn" id="driverNation">
            </div>

            <div class="contentBtn1">
                <span class="nameBrn">*</span>类型<input type="text" value="" class="nameBtn" id="driverType">
            </div>
            <div class="contentBtn6">
                <span class="nameBrn">*</span>结束时间<input type="text" value="" class="dateBtn" id="driverEndTime">
            </div>
            <div class="contentBtn7">
                <span class="nameBrn">*</span>驾驶证号<input type="text" value="" class="carIdBtn" id="driverNum">
            </div>
            <div class="contentBtn1">
                <span class="nameBrn">*</span>地址<input type="text" value="" class="addressBtn" id="driverAddress">
            </div>
        </form>
    </div>

</div>
<div class="main_footer">
    <form method="post" action="${pageContext.request.contextPath}/saveMyOrder">
        <input type="text" name="custId" value="${custId}" style="display: none">
        <input type="text" name="carId" value="${carId}" style="display: none">
        <input type="text" name="borrowStoreId" value="${borrowStoreId}" style="display: none">
        <input type="text" name="couponId" value="${couponId}" style="display: none">
        <input type="text" name="returnStoreId" value="${returnStoreId}" style="display: none">
        <input type="text" name="getCarTime" value="${getCarTime}" style="display: none">
        <input type="text" name="returnCarTime" value="${returnCarTime}" style="display: none">
        <input type="text" name="getterName" class="getterName" style="display: none">
        <input type="text" name="getterIdCard" class="getterIdCard" style="display: none">
        <input type="text" name="getterDriverStartTime" class="getterDriverStartTime" style="display: none">
        <input type="text" name="getterDriverEndTime" class="getterDriverEndTime" style="display: none">
        <input type="text" name="getterDriverType" class="getterDriverType" style="display: none">
        <input type="text" name="myOrderLeaseDays" value="${myOrderLeaseDays}" style="display: none">
        <input type="text" name="myOrderPrice" value="${myOrderPrice}" style="display: none">
        <input type="text" name="custGender" class="custGender" style="display: none">
        <input type="submit" value="下一步" class="subBtn">
    </form>

</div>

</div>
<!--底部的信息-->
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p>
                <a href="" >关于小橘</a>
                |
                <a href="" >移动客户端</a>
                |
                <a href="" >帮助中心</a>
                |
                <a href="" >建议专区</a>
                |
                <a href="" >联系我们</a>
                |
                <a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 苏州小橘信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_first.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_second.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_third.png">
            </a>
            <a href="">
                <img src="http://r1nxp2i0y.hn-bkt.clouddn.com/images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>


<script>
    function changepic1() {
        var reads = new FileReader();
        f = $(".myimage").get(0).files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            $("#preImg1").attr('src',this.result);
        };
    }
</script>

<script>
    function changepic2() {
        var reads = new FileReader();
        f = $(".carimage").get(0).files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            $("#preImg2").attr('src',this.result);
        };
    }
</script>



<script>
    $(".submitBtn1").click(function (){

        var url = "${pageContext.request.contextPath}/uploadSingleFileAjax/person";

        var myimage = $(".imageForm1").serialize();

        $.ajaxFileUpload({
            url:url,
            dataType:"application/json",
            secureuri:false,//是否启用安全机制
            fileElementId:'myimage',
            success:function (result){
                result = $.parseJSON(result.replace(/<.*?>/ig,""));

                console.log("result:" + result);
                console.log("result"+JSON.stringify(result));
                console.log("姓名是:"+result.data.name);
                console.log("性别是:"+result.data.sex);
                console.log("出生日期是:"+result.data.birth);
                console.log("身份证号:"+result.data.num);
                console.log("地址是:"+result.data.address);

                var name=result.data.name;
                var sex=result.data.sex;
                var birth=result.data.birth;
                var num=result.data.num;
                var address=result.data.address;

                $("#idCardName").val(name);
                $("#idCardSex").val(sex);
                $("#idCardBirth").val(birth);
                $("#idCardNum").val(num);
                $("#idCardAddress").val(address);
            }
        } )

    }) ;

    $(".submitBtn2").click(function (){
        var url = "${pageContext.request.contextPath}/uploadSingleFileAjax/car";
        var carimage = $(".imageForm2").serialize();
        $.ajaxFileUpload({
            url:url,
            dataType:"application/json",
            secureuri:false,//是否启用安全机制
            fileElementId:'carimage',
            success:function (result){
                result = $.parseJSON(result.replace(/<.*?>/ig,""));
                console.log(JSON.stringify(result)); //js --> json  结果：{"code":200,"data":20,"reason":"OK"}
                console.log("姓名是:"+result.data.name);
                console.log("性别是"+result.data.sex);
                console.log("国籍是+"+result.data.nation);
                console.log("类型是"+result.data.vehicle_type);
                console.log("开始时间"+result.data.start_date);
                console.log("结束时间是"+result.data.end_date);
                console.log("驾驶证号"+result.data.num);
                console.log("地址"+result.data.addr);

                var name = result.data.name;//姓名
                var num = result.data.num;//身份证号
                var birth_date = result.data.birth_date;//生日
                var sex = result.data.sex;//性别
                var nation = result.data.nation;//国籍
                var address = result.data.addr;//住址
                var vehicle_type = result.data.vehicle_type;//准驾车型
                var issue_date = result.data.issue_date;//初次领证时间
                var start_date = result.data.start_date;//有效期开始时间
                var end_date = result.data.end_date;//有效期结束时间

                $("#driverName").val(name);
                $("#driverSex").val(sex);
                $("#driverStartTime").val(start_date);
                $("#driverNation").val(nation);
                $("#driverType").val(vehicle_type);
                $("#driverEndTime").val(end_date);
                $("#driverNum").val(num);
                $("#driverAddress").val(address);
            }
        } )
    }) ;
</script>

<script>
    $(".subBtn").click(function (){
        $(".getterName").val($("#idCardName").val());
        $(".getterIdCard").val($("#idCardNum").val());
        var time1 = $("#driverStartTime").val();
        var time2 = time1.substr(0,4) + "-" + time1.substr(4,2) + "-" + time1.substr(6,2);
        $(".getterDriverStartTime").val(time2);
        var  time3 = $("#driverEndTime").val();
        var time4 = time3.substr(0,4) + "-" + time3.substr(4,2) + "-" + time3.substr(6,2);
        $(".getterDriverEndTime").val(time4);
        $(".getterDriverType").val($("#driverType").val());
        $(".custGender").val($("#idCardSex").val());
        
    })

</script>

</body>
</html>
